<%--
  Created by IntelliJ IDEA.
  User: 天天好心情
  Date: 2024/10/24
  Time: 19:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
  <%--引入vue--%>
  <script src="../js/vue.js"></script>
  <%--引入axios--%>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
  <%--展示所有的日志信息--%>
  <template>
    <el-table
            :data="tableData"
            border
            style="width: 100%"
            hegiht="600px">
      <el-table-column
              prop="operid"
              label="日志编号">
      </el-table-column>
      <el-table-column
              prop="businesstype"
              label="操作类型"
              width="180">
      </el-table-column>
      <el-table-column
              prop="opername"
              label="操作人员">
      </el-table-column>
      <el-table-column
              prop="operurl"
              label="请求路径">
      </el-table-column>
      <el-table-column
              prop="operip"
              label="操作地址">
      </el-table-column>
      <el-table-column
              prop="opertime"

              label="操作日期">
      </el-table-column>
      <el-table-column
              prop="status"
              label="状态">
        <template slot-scope="scope">
        <el-tag type="info">禁用</el-tag>
        </template>
      </el-table-column>
    </el-table>
  </template>
  <%--分页--%>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
</div>
</body>
<script>
  let app = new Vue({
    el: '#app',
    data:{
      tableData:[],//表格数据
      currentPage:1,//当前页
      pageSize:10,//每页显示的条数
      total:0,//总条数
    },
    created(){
      this.getLog();
    },
    methods:{
      // 展示所有的日志信息
      getLog(){
        axios.get("/log/getLog?currentPage="+this.currentPage+"&pageSize="+this.pageSize).then(res=>{
          this.tableData = res.data.data.list;
          this.total = res.data.data.total;
        })
      },
      // 每页显示的条数改变
      handleSizeChange(val) {
        this.pageSize = val;
        this.getLog();
      },
      // 当前页改变
      handleCurrentChange(val) {
        this.currentPage = val;
        this.getLog();
      }
    }
  })
</script>
</html>
